<template>
    <div class="le">
        <div class="header">校园人员流动情况</div>
        <div class="body" ref="chart">

        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeMount } from 'vue';

const chart = ref<HTMLElement | null>(null);
onMounted(() => {
    if (chart.value) {
        const myChart = echarts.init(chart.value)
        myChart.setOption({
            // backgroundColor: "#000",
            textStyle: {
                color: "#40E7F4",
                fontSize: 16,
                fontWeight: "normal",
            },
            // title: {
            //     left: "9%",
            //     top: 10,
            //     itemGap: 36,
            //     text: "每月融资额/还款额",
            //     subtext: "单位：万元",
            //     textStyle: {
            //         color: "#40E7F4",
            //         fontSize: 14,
            //         fontWeight: "normal",
            //     },
            //     subtextStyle: {
            //         fontSize: 16,
            //         color: "rgba(64, 231, 244, .59)",
            //     },
            // },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "none",
                },
            },
            dataset: {
                dimensions: ["month", "今日外来访客", "昨日外来访客"],
                source: [
                    [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月",
                    ],
                    [49, 7.0, 23.2, 25.6, 76.7, 32.6, 26.4, 49, 7.0, 23.2, 25.6, 76.7],
                    [23.2, 25.6, 28.7, 70.7, 48.7, 18.8, 16.4, 23.2, 25.6, 28.7, 70.7, 48.7],
                ],
            },
            legend: {
                right: "10%",
                top: 10,
                itemWidth: 16,
                itemHeight: 16,
                icon: 'circle',
                itemGap: 36,
                textStyle: {
                    color: "#40E7F4",
                    fontSize: 16,
                },
            },
            calculable: true,
            grid: {
                left: "10%",
                right: "10%",
                bottom: "8%",
                top: "25%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: true, //坐标轴两边留白
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: "#81D8D0",
                            opacity: 0.79,
                        },
                    },
                    splitLine: {
                        //坐标轴在 grid 区域中的分隔线。
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 16,
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#81D8D0",
                            opacity: 0.2,
                        },
                    },
                    axisLabel: {
                        fontSize: 16,
                        // verticalAlign: 'bottom',
                    },
                },
            ],
            series: [
                {
                    name: "",
                    type: "bar",
                    barWidth: "25%",
                    seriesLayoutBy: "row",
                    itemStyle: {
                        barBorderRadius: [30, 30, 0, 0],
                        color: {
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: "#57FFE0" },
                                { offset: 0.3, color: "#3AA5C7" },
                                { offset: 1, color: "#3469E2" },
                            ],
                        },
                    },
                },
                {
                    name: "",
                    type: "bar",
                    barWidth: "25%",
                    seriesLayoutBy: "row",
                    itemStyle: {
                        barBorderRadius: [30, 30, 0, 0],
                        color: {
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: "#F78678" },
                                { offset: 0.5, color: "#C359D0" },
                                { offset: 1, color: "#963EF5" },
                            ],
                        },
                    },
                },
            ],
        })
    }
})


</script>

<style lang="scss" scoped>
.le {
    width: 100%;
    height: 100%;
    //   padding: 100px 50px;
    padding-left: 140px;
}

.header {
    width: 75%;
    height: 8%;
    background: url("@/assets/image/左.png") no-repeat;
    background-size: 97% 100%;
    color: white;
    font-weight: 800;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.body {
    width: 75%;
    height: 65%;
    margin-top: 30px;
    background-color: rgba(12, 29, 95, .8);
}
</style>